<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="dialogTitle"
    :before-close="dialogClose"
    :close-on-press-escape="false"
    append-to-body
    :width="dialogWidth"
  >
    <el-form :model="formData" ref="formData" label-width="140px" size="small">
      <div v-for="(element, key, index) in elements" :key="key">
        <el-form-item
          v-if="element.eleName == 'input' && element.show"
          :label="element.label"
          :prop="element.model"
          :rules="element.rules"
        >
          <div class="tip-input">
            <el-input
              v-model.trim="formData[element.model]"
              :placeholder="element.placeholder"
              :disabled="element.disabled"
            ></el-input>
            <template v-if="element.tipLabel">
              <span v-if="element.tipWidth" :style="{width:element.tipWidth}">
                <span :style="element.tipColor ? {color:element.tipColor} : ''">{{element.tipLabel}}</span>
                <span v-if="element.tipModel">{{formData[element.tipModel]}}</span>
              </span>
              <span v-else>
                <span>{{element.tipLabel}}</span>
                <span v-if="element.tipModel">{{formData[element.tipModel]}}</span>
              </span>
            </template>
          </div>
        </el-form-item>
        <el-form-item
          v-else-if="element.eleName == 'datetime' && element.show"
          :label="element.label"
          :prop="element.model"
          :rules="element.rules"
        >
          <el-date-picker
            v-model="formData[element.model]"
            type="datetime"
            :placeholder="element.placeholder"
            align="right"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            @change="datetimeChange(element.changeEvent ? element.changeEvent : undefined)"
            :default-time="element.defaultTime ? element.defaultTime : '00:00:00'"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          v-else-if="element.eleName == 'date' && element.show"
          :label="element.label"
          :prop="element.model"
          :rules="element.rules"
        >
          <el-date-picker
            v-model="formData[element.model]"
            type="datetime"
            :placeholder="element.placeholder"
            align="right"
            size="mini"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            @change="dateChange(element.changeEvent ? element.changeEvent : undefined)"
            :default-time="element.defaultTime ? element.defaultTime : '00:00:00'"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          v-else-if="element.eleName == 'radio-group'"
          :label="element.label"
          :prop="element.model"
          :rules="element.rules"
        >
          <el-radio-group
            v-model="formData[element.model]"
            @change="radioChange(elements, formData[element.model], element.changeEvent)"
            :disabled="element.disabled"
          >
            <template v-for="(radio, index) in element.radios">
              <el-radio :label="radio.label">{{ radio.text }}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-else-if="element.eleName == 'form-item-box'" :label="element.label">
          <div class="second-leve-item">
            <div v-for="(value2, key2, index) in element.elements">
              <form-item :element="value2" :elements="element.elements" :formData="formData"></form-item>
            </div>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div class="dialog-bottom-btn">
      <el-button type="primary" @click="confirm" size="medium">确定</el-button>
      <el-button @click="dialogClose" size="medium">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Vue from 'vue'
const _linkage = function (elements, formData) {
  for (let k in elements) {
    if (elements[k].eleName == 'radio-group') {
      let model = elements[k].model
      if (
        elements[k].linkage &&
        formData[model] &&
        elements[k]['linkage'][formData[model]]
      ) {
        for (let k2 in elements[k]['linkage'][formData[model]]) {
          let element = elements[k]['linkage'][formData[model]][k2]
          if (typeof element['disabled'] == 'boolean') {
            elements[k2]['disabled'] = element['disabled']
          }
          if (typeof element['show'] == 'boolean') {
            elements[k2]['show'] = element['show']
          }
          if (typeof element['rules'] == 'object') {
            elements[k2]['rules'] = element['rules']
          }
        }
      }
    }
  }
}
const _radioChange = function (elements, model, changeEvent) {
  if (typeof changeEvent == 'function') {
    changeEvent(model)
  }
  _linkage(elements, this.formData)
}
const _datetimeChange = function (changeEvent) {
  if (typeof changeEvent == 'function') {
    changeEvent(model)
  }
}
const _dateChange = function (changeEvent) {
  if (typeof changeEvent == 'function') {
    changeEvent(model)
  }
}
export default {
  name: 'form-dialog',
  props: {
    elements: {
      type: Object,
      default: function () {
        return {}
      },
    },
    formData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    dialogClose: {
      type: Function,
      default: function () {
        return null
      },
    },
    dialogTitle: {
      type: String,
      default: function () {
        return ''
      },
    },
    dialogVisible: {
      type: Boolean,
      default: function () {
        return false
      },
    },
    toSubmit: {
      type: Function,
      default: function () {
        return null
      },
    },
    dialogWidth: {
      type: String,
      default: function () {
        return ''
      },
    },
  },
  mounted() {
    this.radioChange = _radioChange
    this.datetimeChange = _datetimeChange
    this.dateChange = _dateChange
    _linkage(this.elements, this.formData)
  },
  methods: {
    formDataRef() {
      return this.$refs.formData
    },
    confirm() {
      this.$refs.formData.validate(async (v) => {
        if (!v) {
          return false
        }
        this.toSubmit()
      })
    },
    load() {
      _linkage(this.elements, this.formData)
    },
  },
}
</script>
<style scoped>
.dialog-bottom-btn {
  text-align: center;
}
.second-leve-item {
  background-color: #f5f7fa;
  padding: 10px 10px 10px 0;
  border-radius: 5px;
  border: 1px solid #eee;
}
.tip-input {
  display: flex;
}
.tip-input span {
  margin-left: 10px;
}
.el-input__inner::placeholder {
  color: rgb(27, 26, 26);
}
</style>
